<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../js/axios.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        section {
            min-width: 400px;
            background: #eee;
        }

        .right,
        .left {
            float: left;
            height: 100%;
            min-height: 200px;
        }

        .left {
            width: 300px;
            margin-left: -100%;
            background: lightblue;
        }

        .right {
            width: 100%;
            background: lightgreen;
        }

        .content {
            margin: 0 0 0 230px;
        }

        .title {
            height: 50px;
            width: 300px;
        }

        .title h2 {
            text-align: center;
        }

        .ctop {
            height: 50px;
            background: #37BDE7;
        }

        .nav,
        .cmain {
            position: absolute;
            top: 50px;
            bottom: 0;
            background: #87D7F1;
        }

        .nav {
            width: 300px;
        }

        .ctop {
            background: #37BDE7;
        }

        .cmain {
            width: 100%;
            background: pink;
            margin-left: -230px;
            overflow: auto;
        }

        .cccc {
            padding-left: 300px;
            height: 900px;
        }

        /*以下为滚动条样式*/
        ::-webkit-scrollbar {
            width: 5px;
        }

        ::-webkit-scrollbar-track {
            background-color: #bee1eb;
        }

        ::-webkit-scrollbar-thumb {
            background-color: #00aff0;
            border-radius: 3px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background-color: #9c3
        }

        ::-webkit-scrollbar-thumb:active {
            background-color: #00aff0
        }

        .ctop h1 {
            text-align: center;
        }

        .nav input:nth-child(1) {
            height: 30px;
            width: 200px;
            margin-left: 45px;
            margin-top: 20px;
            display: block;
        }

        .nav input:nth-child(2) {
            height: 30px;
            width: 200px;
            margin-left: 45px;
            margin-top: 20px;
            display: block;
        }

        .nav input:nth-child(3) {
            height: 30px;
            width: 200px;
            margin-left: 45px;
            margin-top: 20px;
            display: block;
        }

        .nav input:nth-child(4) {
            height: 30px;
            width: 200px;
            margin-left: 45px;
            margin-top: 20px;
            display: block;
        }

        .nav input:nth-child(5) {
            margin-left: 125px;
            margin-top: 20px;
            display: block
        }

        .cccc ul {
            width: 800px;
            margin: 0 auto;
        }

        .cccc li {
            list-style: none;
            border: 1px solid brown;
        }

        .button {

            margin-left: 20px;
            color: red;
            background-color: yellow;
        }

        a {
            float: right;
            margin-right: 20px;
            text-decoration: none;
            color: red;
            background-color: yellow;
            border: 1px solid black;
        }

        img {
            width: 70%;
        }
    </style>

<body>
    <section>
        <div class="right">
            <div class="content">
                <div class="ctop">
                    <h1>添加商品</h1>
                </div>
                <div class="cmain">
                    <div class="cccc">
                        <ul>
                            <!-- <li>
                                <h2></h2>
                                <p></p>
                                <img src="" alt="">
                              </li> -->
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="left">
            <div class="title">
                <h2>管理员系统</h2>
            </div>
            <div class="nav">
                <input type="text" name="" id="" placeholder="电影名称" />
                <input type="text" name="" id="" placeholder="电影票" />
                <input type="text" name="" id="" placeholder="影视图" />
                <input type="text" name="" id="" placeholder="影视介绍" />
                <input type="button" name="" id="" value="发布" />

            </div>
        </div>                          
    </section>
    <script>
        /*   所有商品接口
                get
                参数
                pagesize  每页获取几个数据
                pagenum 获取第几页数据
                uid  用户id
                http://jx.xuzhixiang.top/ap/api/allproductlist.php?pagesize=20&pagenum=4 */

        let pagesize = 10;
        let pagenum = 0;
        // 用户id
        let id = localStorage.getItem("id");
        let token = localStorage.getItem("token");
        laodList();
        // 封装加载商品列表的函数 --- 页面一开始需要 加载商品列表-- 发布了商品列表得更新 加载商品列表
        function laodList() {
            let listAPI = "http://jx.xuzhixiang.top/ap/api/allproductlist.php";
            axios
                .get(listAPI, {
                    params: {
                        pagesize,
                        pagenum,
                        uid: id,
                    },
                })
                .then((r) => {
                    console.log(r.data);
                    //商品数组
                    let productArr = r.data.data;
                    // {pname:'aa',pprice:'111'}{}
                    // console.log();

                    // 根据商品数组- 拼接字符串 给ul
                    let str = "";
                    productArr.forEach((pObj) => {
                        str += `<li>
                            <h2>${pObj.pname}</h2>
                            <p>${pObj.pprice}</p>
                            <img src="${pObj.pimg}" alt="">
                            <p>${pObj.pdesc}</p>
                            <button class="button" onclick="delProduct(${pObj.pid})">删除</button>
                            <a href="amend.html?id=${pObj.pid}">修改</a>
                          </li>`;
                    });

                    document.querySelector("ul").innerHTML = str;
                });
        }

        /*
            添加商品 接口
    
        接口地址：  http://jx.xuzhixiang.top/ap/api/goods/goods-add.php
             接口请求方式：get
             接口参数：
    
             <li>
                            <h2>${pObj.pname}</h2>
                            <p>${pObj.pprice}</p>
                            <p>${pObj.pdesc}</p>
                            <img src="${pObj.pimg}" alt="">
                            <button onclick="delProduct(${pObj.pid})">删除</button>
                            <a href="update.html?id=${pObj.pid}">修改</a>
                          </li>
            1.
        pimg 2.
        pname 3.
        pprice 4.
        pdesc 5.
        uid （可选）用户商品
    
             使用方式  post 请求，参数在请求体
    
            */

        /*  */
        let ipts = document.querySelectorAll("input");
        ipts[4].onclick = function () {
            let pname = ipts[0].value;
            let pprice = ipts[1].value;
            let pimg = ipts[2].value;
            let pdesc = ipts[3].value;
            let addProductAPI =
                "http://jx.xuzhixiang.top/ap/api/goods/goods-add.php";
            axios
                .get(addProductAPI, {
                    params: {
                        pimg,
                        pname,
                        pprice,
                        pdesc,
                        uid: id,
                    },
                })
                .then((r) => {
                    console.log(r.data);
                    // 发布成功加载商品列表
                    laodList();
                });
        };

        // 删除函数

        /* 
        接口地址：    http://jx.xuzhixiang.top/ap/api/goods/goods-delete.php
           接口请求方式：get
           接口参数：
    
                  pid（必选）商品的id
                  uid（必选）用户的id
                   token（必选）登陆时候返回的token
    
                    使用方式
                   http://jx.xuzhixiang.top/ap/api/goods/goods-delete.php?pid=2459
    
        */
        async function delProduct(pid) {
            console.log(pid);
            // 准备删除接口参数
            let params = {
                pid,
                uid: id,
                token
            };
            console.log(params);
            let productDelteAPI =
                "http://jx.xuzhixiang.top/ap/api/goods/goods-delete.php";
            let res = await axios.get(productDelteAPI, {
                params: params
            });
            console.log(res.data);
            //调用 加载列表
            laodList();
        }
    </script>
</body>

</html>